<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>提现记录</title>
  <link rel="stylesheet" href="/mobile/css/index.css" />
  <script src="/mobile/js/vue.js"></script>
  <script src="/mobile/js/axios.min.js"></script>
  <script src="/mobile/js/vant.min.js"></script>
  <script src="/mobile/js/dayjs.min.js"></script>
  <script src="/mobile/js/crypto-js.js"></script>
  <script src="/mobile/js/aes.js"></script>
  <script src="/mobile/js/common.js"></script>
  <style>
  * {
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
    user-select: none;
    /* Standard syntax */
    list-style: none;
  }

  #app {
    background: #05071D;
    min-height: 100vh;
    box-sizing: border-box;
    color: #fff;
  }

  .list-item {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    background: #05071D;
  }

  .list-item:not(:last-child) {
    border-bottom: 1px solid #0D0E24;
  }

  .van-empty__image {
    width: 200px;
    height: 150px;
  }

  .van-list__loading {
    background: #05071D;
  }
  .action {
    font-size: 12px;
  }
  .shell {
    color: #7F55F3;
    font-weight: bold;
    margin: 6px 0;
  }
  .time {
    font-size: 12px;
    color: #8890A5;
  }
  .status {
    font-size: 12px;
  }
  .right {
    text-align: right;
  }
  .error-info {
    max-width: 120px;
    font-size: 12px;
    color: #8890A5;
  }

  </style>
</head>

<body>
  <div id="app">
    <van-empty v-if="!list.length" image="/mobile/img/empty.png" description="暂无数据"></van-empty>
    <van-list v-else v-model="loading" :finished="finished" @load="getData" :immediate-check="false">
      <div v-for="(item, index) in list" :key="index" class="list-item">
        <div class="left">
          <div class="action">{{item.orderNo}}</div>
          <div class="shell">￥{{item.money}}({{item.pearl}}珍珠)</div>
          <div class="time">{{dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
        </div>
        <div class="right">
          <div class="status">{{formatState(item)}}</div>
          <div v-if="item.state === 2 && item.auditResult" class="error-info">{{item.auditResult}}</div>
        </div>
      </div>
    </van-list>
  </div>
  <script>
  new Vue({
    el: '#app',
    data: {
      loading: false,
      finished: false,
      token: '',
      list: [],
      page: 1,
      limit: 40,
    },
    created() {
      const parse = (queryStr) => {
        const str = queryStr.replace(/^\?/, '')
        return str.split('&').reduce((pre, key) => {
          const [k, v] = key.split('=')
          pre[decodeURIComponent(k)] = decodeURIComponent(v)
          return pre
        }, {})
      }
      var data = parse(location.search)
      if (data.token) {
        this.token = data.token
        this.getData()
      }
    },
    methods: {
      getData() {
        request.post('/api/business/app/getUserExtractMoneyRecord', {
          limit: this.limit,
          page: this.page
        }).then(res => {
          console.log(res)
          this.loading = false
          if (!res.data.list.length) {
            this.finished = true
            return
          }
          this.list = this.list.concat(res.data.list)
          this.page ++
        })
      },
      formatState (row) {
        if (row.state === 1 && !row.orderNo) {
          return '待打款'
        }
        var type = {
          0: '审核中',
          1: '提现成功',
          2: '提现失败'
        }
        return type[row.state]
      }
    }
  })
  </script>
</body>

</html>